<style scoped>
</style>
<!-- 链接弹窗编辑器 -->
<template>
  <div>
    <el-dialog @close="close" title="设置链接" :visible.sync="dialogFormVisible">
      <el-form @submit.native.prevent>
        <el-form-item :label="title" style="margin-bottom:0px;">
          <el-input size="small" :style="'width:'+width+';'" v-model="link.href" maxlength="128" placeholder="链接地址">
          </el-input>
          <el-radio-group style="margin-left:24px;" v-model="link.target">
            <el-radio :label="'_self'">当前页面跳转</el-radio>
            <el-radio :label="'_blank'">新打开页面跳转</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '链接'
    },
    width: {
      type: String,
      default: '320px'
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      link: {
        href: '',
        target: '_self'
      },
      callback: () => { }
    }
  },
  methods: {
    close () {
      this.link = {
        href: '',
        target: '_self'
      }
      this.callback = () => { }
    },
    open (lk, callback) {
      if (!lk.target) {
        lk.target = '_self'
      }
      this.link = lk
      this.callback = callback
      this.dialogFormVisible = true
    },
    ok () {
      this.callback(this.link)
      this.dialogFormVisible = false
    }
  }
}

</script>
